<template>
  <div id="app">
    <div class="headerNav clearfix">
      <el-radio-group v-model="tabIndex" @change="navChange">
        <el-radio-button :label="item.path" v-for="(item,index) in navList" :key="index">
          {{item.name}}
          <div class="counts" v-if="!!item.getCount" v-show="badge[item.getCount]>0">{{badge[item.getCount]}}</div>
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="rightContent">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  props:{
    navPage:Array,
  },
  data() {
    let path = this.$route.path;
    
    return {
      tabIndex: this.getTabIndex(path),
      navList:[],
    }
  },
  computed: {
    badge(){
      return this.$store.getters.badge;
    },
  },
  watch:{
    $route(to,from){
      this.navList = [...this.navPage];
      this.tabIndex = this.getTabIndex(to.path);
    },
  },
  methods: {
    getTabIndex(path){
      let paths = path.split('/');
      let tabIndex = paths[2] == 'cash' || paths[2] == '' ? `/${paths[1]}/` : `/${paths[1]}/${paths[2]}/`;
      return tabIndex;
    },
    navChange(path){//导航栏切换
      this.$router.push(path);
    },
  },
  mounted() {
    this.navList = this.navPage;
  }
}
</script>
<style lang="scss" scoped>
  .headerNav{
    margin-bottom:25px;
    a{
      float:left;
      text-decoration: none;
      color:#333;
    }
  }
  .counts{
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    height: 17px;
    line-height: 15px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #fff;
    position:absolute;
    top:-8px;
    right:3px;
  }
</style>